<template>
  <div class="fenlei">
    <div v-for="(item, index) in list" :key="index">
      <h5 @click="fenleijieguo(item.brand)">{{ item.brand }}</h5>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: null,
      list2: [],
    };
  },
  props: ["i"],
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.list2 = [];

      //获取分类列表的品牌
      axios
        .get(
          `http://121.89.205.189:3000/api/pro/categorybrandlist/?category=${this.$route.params.i}`
        )
        .then((res) => {
          this.list = res.data.data;
          console.log(res.data.data);
          this.list.forEach((item) => {
            axios
              .get(
                `http://121.89.205.189:3000/api/pro/categorybrandprolist/?category=${this.$route.params.i}&brand=${item.brand}`
              )
              .then((res) => {
                // item.xq = res.data.data;
                this.list2.push(res.data.data);
              });
          });
        });
    },
    fenleijieguo(item) {
      this.$router.push({
        name: "fenleijieguo",
        query: { brand: item, category: this.$route.params.i },
      });
    },
  },
  watch: {
    $route() {
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.fenlei {
  flex-wrap: wrap;
  background: white;
  display: flex;
  align-content: flex-start;
  > div {
    display: flex;
    height: 0.5rem;

    > h5 {
      padding: 0.1rem;
      font-size: 0.15rem;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    > ul {
      display: flex;
      flex-wrap: wrap;
      > li {
        width: 32%;
        height: 105px;
        display: flex;
        justify-content: center;
        align-items: center;
        > dl {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          > dd {
            text-align: center;
            width: 100%;
            height: 20px;
            overflow: hidden;
            font-size: 8px;
          }
          > dt {
            width: 0.7rem;
            height: 0.7rem;
          }
        }
      }
    }
  }
}
</style>